<template>
  <!-- 头部 -->
  <div class="text">
    <span>推荐</span>
    <i class="iconfont icon-yonghu" />
  </div>
  <!-- 发帖 -->
  <div
    @click="toPublish"
    class="box"
  >
    发帖
  </div>
  <!-- 动态列表 -->
  <ul class="dynamic">
    <li
      v-for="(dynamic,index) in obj"
      :key="dynamic.id"
    >
      <div class="top">
        <img
          :src="dynamic.userImg"
        >
        <div class="name">
          <span>{{ dynamic.name }}</span>
          <span>{{ dynamic.time }}</span>
        </div>
      </div>
      <p class="middle">
        {{ dynamic.dynamic }}
      </p>
      <div class="bottom">
        <i
          class="iconfont icon-zhuanfa"
          @click="modifyInfo(dynamic.id,index,'forward')"
        >{{ dynamic.forward }}</i>
        <i
          class="iconfont icon-pinglun"
          @click="modifyInfo(dynamic.id,index,'comment')"
        >{{ dynamic.comment }}</i>
        <i
          class="iconfont icon-aixin"
          @click="modifyInfo(dynamic.id,index,'fabulous')"
        >{{ dynamic.fabulous }}</i>
      </div>
    </li>
  </ul>
  <!-- 底部样式 -->
  <div
    class="bottom-item"
    v-if="paging.show"
  >
    加载中……
  </div>
  <div
    class="bottom-item"
    v-else
  >
    到底啦_(:з」∠)_
  </div>
</template>

<script setup name="Community">
import { dynamicInfo, modifyDynamic } from '@/api/public'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 声明变量
const obj = ref([])
const router = useRouter()
const paging = reactive({
  page: 1,
  limit: 5,
  show: true
})

// 获取数据
const getData = async () => {
  const { page, limit } = paging
  const result = await dynamicInfo({ _page: page, _limit: limit })
  // 判断数据是否为空，展示是否加载中
  result.length > 0 ? (paging.show = true) : (paging.show = false)
  if (result.length > 0) {
    result.forEach((item) => {
      obj.value.push(item)
    })
  }
}

// 点击点赞评论转发效果
const modifyInfo = async (id, index, v) => {
  if (v === 'forward') {
    await modifyDynamic(id, { forward: ++obj.value[index].forward })
  } else if (v === 'comment') {
    await modifyDynamic(id, { comment: ++obj.value[index].comment })
  } else {
    await modifyDynamic(id, { fabulous: ++obj.value[index].fabulous })
  }
}

// 发帖跳转页面
const toPublish = () => {
  router.push('/community/publish')
}

// 调用函数
onMounted(getData)
// 检测滚动事件
function ScrollBottom () {
  // 动态值，已滚动高度
  const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
  // 固定值，可视高度
  const clientHeight = document.documentElement.clientHeight
  // 固定值，滚动条
  const scrollHeight = document.documentElement.scrollHeight
  // 判断是否到底部
  if (Math.ceil(scrollTop + clientHeight) >= scrollHeight) {
    if (paging.show) {
      paging.page++
      getData()
    }
  }
}

// 注册滚动事件
window.addEventListener('scroll', ScrollBottom)

// 卸载滚动事件
onUnmounted(() => window.removeEventListener('scroll', ScrollBottom))
</script>

<style lang="less" scoped>
.text{
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px 0px 15px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.4);
    span{
        font-size: 22px;
        font-weight: 600;
    }
    i{
        font-size: 20px;
    }
}
.box{
    position: fixed;
    right: 15px;
    bottom: 65px;
    width: 50px;
    height: 50px;
    background-color: #8B658B;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.dynamic{
    margin-top: 40px;
    li{
        width: 100%;
        height: auto;
        border-bottom: 1px solid rgba(128, 128, 128, 0.3);
        padding: 10px 15px;
        .top{
            width: 100%;
            height: 50px;
            display: flex;
            img{
                width: 35px;
                height: 35px;
                border-radius: 50%;
            }
            .name{
                display: flex;
                flex-direction: column;
                margin-left: 15px;
                span{
                    &:nth-child(1){
                        font-size: 15px;
                    }
                    &:nth-child(2){
                        font-size: 10px;
                        color: gray;
                    }
                }
            }
        }
        p.middle{
            font-size: 12px;
        }
        .bottom{
            margin-top: 5px;
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            i{
                flex: 1;
                font-size: 18px;
                color: gray;
            }
        }
    }
}
.bottom-item {
  width: 100%;
  height: 60px;
  margin-top: 20px;
  margin-bottom: 50px;
  text-align: center;
  font-size: 18px;
  color: gray;
  box-sizing: border-box;
}
</style>
